<!DOCTYPE html>
<html>

<head>
  <title>序列帧动画合成预览</title>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
  <script src="./sequenceAnimationMerge.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      background: rgb(236, 236, 236);
      overflow: hidden;
    }

    .center {
      width: 100vw;
      height: 100vh;
      background-color: #000;
      display: flex;
      flex-wrap: wrap;
    }

    .center_top {
      width: 100vw;
      height: 35%;
      border-bottom: 2px solid #333;
      box-sizing: border-box;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
    }

    .center_mind {
      width: 100vw;
      height: 65%;
      display: flex;
    }

    .center_mind_left {
      width: 40vw;
      height: 100%;
      border-right: 2px solid #333;
      box-sizing: border-box;
      padding: 20px;
    }

    .center_mind_right {
      width: 60vw;
      height: 100%;
      display: flex;
    }

    .mind_right_css {
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }

    .mind_right_style {
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }

    .center .tip {
      width: 100%;
      height: 18px;
      line-height: 18px;
      font-size: 18px;
      color: #999;
      margin-bottom: 10px;
    }

    .canvasView {
      width: 100%;
      height: 84%;
      /* overflow-y: hidden; */
      overflow: scroll;
    }



    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 4px rgba(87, 87, 87, 0.2);
      background-color: rgba(51, 51, 51, 0.3);
    }

    /* 滚动条的滑轨背景颜色 */
    ::-webkit-scrollbar {
      width: 2px;
      height: 2px;
      background-color: rgba(51, 51, 51, 0.3);
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 20px;
      background-color: royalblue;
    }


    /* 滑块颜色 */
    .canvas {
      /* height: 92%; */
    }

    .flashView {
      width: 100%;
      height: 96%;
      overflow: auto;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      /* 水平居中 */
      align-items: center;
      /* 垂直居中 */
    }

    .css {
      width: 100%;
      height: 85%;
      font-size: 18px;
      color: #fff;
      line-height: 24px;
      border: none;
      padding: 10px;
      background-color: #000;
      outline: none;
    }

    .style {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      overflow-y: auto;
    }

    .textTip {
      width: 100%;
      font-size: 18px;
      color: #999;
      margin-bottom: 10px;
    }

    .txt {
      width: 100%;
      height: 46px;
      font-size: 18px;
      background-color: #000;
      color: #fff;
      border: 1px #fff solid;
      padding: 0 10px;
      margin-bottom: 20px;
      border-radius: 6px;
    }

    .btn {
      width: 100%;
      height: 20px;
      background-color: royalblue;
      text-align: center;
      padding: 20px;
      font-size: 18px;
      line-height: 18px;
      color: #fff;
      cursor: pointer;
    }

    .cc {
      text-align: center;
      font-size: 18px;
      line-height: 20px;
      border-width: bold;
    }
    .loading{
      position: fixed;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);  
      background-size: 64px 64px;
      background-repeat: no-repeat;
      background-position: center;
      display: none;
      background-image: url("");
  
    }
  </style>
</head>

<body>
  <div class="loading">
    加载中...
  </div>
  <div class="center">
    <div class="center_top">
      <div class="tip">动画图集：(右键保存图片)</div>
      <div class="canvasView">
        <canvas class="canvas"></canvas>
      </div>
    </div>
    <div class="center_mind">
      <div class="center_mind_left">
        <div class="tip">动画预览：</div>
        <div class="flashView">
          <div class="cartoon"></div>
        </div>
      </div>
      <div class="center_mind_right">
        <div class="mind_right_css">
          <div class="tip">动画样式：</div>
          <textarea class="css"></textarea>
        </div>
        <div class="mind_right_style">
          <div class="tip">动画配置：</div>
          <div class="style">
            <div class="textTip cc">序列帧动画合成预览工具</div>
            <div class="textTip">图片文件夹，*代表连续数字，如：asset/bs*.png</div>
            <input class="txt path" type="text">
            <div class="textTip">输入起始数据(最大不超过99帧)，如：1-7</div>
            <input class="txt num" type="text">
            <div class="textTip">输入播放速度默认为1，如：4</div>
            <input class="txt speed" type="text">
            <div class="btn">生成图集</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
  </div>
</body>

</html>